import { useState, useEffect } from "react";
import { Form, Alert } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { outboundSplitOrder } from "../../service";
import { CommonTable } from "@/pages/OrderModule/common/components/CommonTable";

const splitOrder = ({ visible, selectedRows, outboundNoList, handleCancel, fetchList }) => {
	const [form] = Form.useForm();
	const [modal1Open, setModal1Open] = useState(false);
	const [sortOrderList, setSortOrderList] = useState(false);

	useEffect(() => {
		if (visible) {
			form.resetFields();
		}
	}, [visible]);
	const columns = [
		{
			title: "分拣筐",
			dataIndex: "boxName"
		},
		{
			title: "出库单号",
			dataIndex: "oldOutboundOrderNo"
		},
		{
			title: "错误原因",
			dataIndex: "msg"
		}
	];
	const onOk = () => {
		outboundSplitOrder(outboundNoList?.map(x => x.outboundNo)).then(res => {
			const { success, data, msg } = res;
			if (success) {
				setSortOrderList(data);
				setModal1Open(true);
			}
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};
	const onListCancel = () => {
		handleCancel();
		setModal1Open(false);
		fetchList();
	};
	const onListOk = () => {
		setModal1Open(false);
		handleCancel();
		fetchList();
	};
	const renderAlertMsg = () => {
		return (
			<div>
				<div>1、只有部分分拣的订单才能进行拆分，其他订单跳过</div>
				<div>2、拆分后，会把未分拣的商品拆出去</div>
			</div>
		);
	};
	return (
		<CommonModal title={{ title: "拆分订单" }} visible={true} onOk={onOk} onCancel={onCancel} minHeight="150px">
			<Alert showIcon message={renderAlertMsg()} />
			<div style={{ marginTop: 16 }}>确定拆分所选订单吗？</div>

			{modal1Open && (
				<CommonModal
					title={{ title: "拆分订单结果" }}
					open={modal1Open}
					onOk={onListOk}
					onCancel={onListCancel}
					// onCancel={() => setModal1Open(false)}
				>
					<CommonTable
						rowKey="key"
						scroll={{ y: `calc(100vh - 250px)` }}
						columns={columns}
						dataSource={sortOrderList}
						pagination={false}
					/>
				</CommonModal>
			)}
		</CommonModal>
	);
};

export default splitOrder;
